<template>
  <div class="app-container" >
    <div v-for="(item, index) in imageCropper" :key="item.key">
      <div class="container-box" style="display: flex;flex-direction: column; align-items: center">
        <div class="title text-primary" style="align-self: flex-start">{{ item.label }}</div>
        <div style="display: flex;flex-direction: row;justify-content: space-between;width: 100%">
          <div></div>
          <div>
            <el-image v-if="item.name.indexOf('index') >= 0" class="advertisement-index" :style="{height:item.height + 'px',width: item.width+ 'px' }" :src="item.url" fit="scale-down" @click.native="showCrop(index)" />
            <el-image v-else class="advertisement-search" :style="{height:item.height + 'px',width: item.width+ 'px' }" :src="item.url" fit="scale-down" @click.native="showCrop(index)" />
          </div>
          <div><el-button style="float: right" v-waves type="danger" icon="el-icon-delete" circle plain @click="cropSuccess(index,'')"></el-button></div>
        </div>

      </div>
      <image-cropper
        v-show="item.visible"
        :width="item.width"
        :height="item.height"
        url="http://localhost:8090/"
        :headers="{authorization:'+ $store.getters.token +'}"
        lang-type="zh"
        :no-square="true"
        :no-circle="true"
        @close="item.visible = false"
        @crop-upload-success="cropSuccess(index,$event)"
      />
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import ImageCropper from '@/components/ImageCropper'
import { getAdList, setAd } from '@/api/ad'
export default {
  name: 'Advertisement',
  components: { ImageCropper },
  directives: { waves },
  data() {
    return {
      imageCropper: []
    }
  },
  created() {
  },
  mounted() {
    this.getAdList()
  },
  methods: {
    showCrop(index) {
      this.imageCropper[index].visible = true
      console.log(this.imageCropper)
    },
    cropSuccess(index, resData) {
      const form = Object.assign({}, this.imageCropper[index])
      form.url = resData
      console.log(index)
      console.log(resData)
      setAd(form).then(
        res => {
          this.$message({
            message: '更新成功',
            duration: 500,
            type: 'success'
          })
          this.getAdList()
        }
      )
    },
    getAdList() {
      getAdList().then(
        res => {
          this.imageCropper = []
          for (const i in res.data.items) {
            const form = {
              height: -1,
              width: -1,
              visible: false,
              name: '',
              url: '',
              label: ''
            }
            this.imageCropper.push(Object.assign(form, res.data.items[i]))
          }
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
  .container-box{
    margin: 20px;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }
  .table-title{
    font-weight: bolder;
    font-size: 25px;
    margin-bottom: 20px;
  }
  .form-item{
    display: flex;
    flex-direction: row;
    font-size: 20px;
    margin: 5px;
  }
  .form-label{
    font-weight: bold;
  }
  .form-value{
    color: #7d7d7f;
  }
  .title{
    font-weight: bold;
  }
  .advertisement-index{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 850px;
    height: 550px;
    margin-left: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    font-size: 40px;
    font-weight: bolder;
    &:hover {
      cursor: pointer;
    }
    &:hover:after {
      position: absolute;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 850px;
      height: 550px;
      background-color: #000000;
      color: #ffffff;
      opacity: 0.3;
      content: '点击更换广告图片';
      z-index: 99;
    }
  }
  .advertisement-search{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 250px;
    height: 550px;
    margin-left: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    font-size: 40px;
    font-weight: bolder;
    &:hover {
      cursor: pointer;
    }
    &:hover:after {
      position: absolute;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 170px;
      height: 400px;
      background-color: #000000;
      color: #ffffff;
      opacity: 0.3;
      content: '点击更换广告图片';
      z-index: 99;
    }
  }
</style>
